```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor AI 对话功能详解 - 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9f9f9;
        }
        .hero-bg {
            background: linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(168,85,247,0.9) 100%);
        }
        .prose {
            max-width: 900px;
        }
        .prose h2 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
            color: #1a365d;
            position: relative;
            padding-bottom: 0.5rem;
            margin-top: 2.5rem;
            margin-bottom: 1.5rem;
        }
        .prose h2:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #3b82f6, #a855f7);
            border-radius: 3px;
        }
        .prose h3 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #2d3748;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .prose p {
            margin-bottom: 1.25rem;
        }
        .prose ul {
            margin-bottom: 1.5rem;
        }
        .prose li {
            margin-bottom: 0.5rem;
            position: relative;
            padding-left: 1.75rem;
        }
        .prose li:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.6em;
            width: 0.5rem;
            height: 0.5rem;
            background-color: #3b82f6;
            border-radius: 50%;
        }
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            border-radius: 0.5rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            position: relative;
        }
        .code-block:before {
            content: '代码示例';
            position: absolute;
            top: 0;
            right: 0;
            background-color: #4a5568;
            color: #cbd5e0;
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-bottom-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }
        .tip-card {
            background-color: #ebf5ff;
            border-left: 4px solid #3b82f6;
            padding: 1rem 1.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
            margin-bottom: 1.5rem;
        }
        .tip-card .icon {
            color: #3b82f6;
            margin-right: 0.5rem;
        }
        .visual-card {
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 2rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .visual-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .visual-card h3 {
            color: #3b82f6;
            margin-top: 0;
        }
        .keyword-badge {
            display: inline-block;
            background-color: #e9d8fd;
            color: #6b46c1;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .diagram-container {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-10 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4 font-serif">Cursor AI 对话功能</h1>
                <p class="text-xl md:text-2xl opacity-90 mb-8">自然语言编程的新范式</p>
                <div class="flex flex-wrap gap-3 mb-8">
                    <span class="keyword-badge bg-purple-100 text-purple-800">AI 辅助编程</span>
                    <span class="keyword-badge bg-blue-100 text-blue-800">自然语言交互</span>
                    <span class="keyword-badge bg-indigo-100 text-indigo-800">代码理解</span>
                    <span class="keyword-badge bg-teal-100 text-teal-800">智能调试</span>
                </div>
                <a href="#content" class="inline-flex items-center px-6 py-3 bg-white text-blue-600 font-medium rounded-full shadow-md hover:bg-gray-100 transition duration-200">
                    <i class="fas fa-arrow-down mr-2"></i> 探索功能
                </a>
            </div>
            <div class="md:w-1/2">
                <div class="visual-card bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm border border-white border-opacity-20">
                    <div class="mockup-code bg-gray-900">
                        <pre data-prefix="$"><code class="text-green-400">// 用户提问</code></pre>
                        <pre data-prefix=">" class="text-blue-400"><code>@utils.js 中的排序函数如何优化?</code></pre>
                        <pre data-prefix="$" class="text-green-400"><code>// AI 响应</code></pre>
                        <pre data-prefix=">" class="text-gray-300"><code>分析该函数后，建议以下优化:
1. 改用快速排序算法，时间复杂度从O(n²)降到O(n log n)
2. 添加缓存机制处理重复输入
3. 实现自定义比较函数提升灵活性

优化后代码:
[代码示例...]</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main id="content" class="flex-grow container mx-auto px-4 py-12 max-w-5xl">
        <div class="prose mx-auto">
            <p class="text-xl text-gray-700 mb-8">Cursor 的 AI 对话功能是其最具创新性的特点之一，它让开发者能够通过自然语言与 AI 助手进行交流，从而实现更直观、更高效的编程体验。本章将详细介绍如何充分利用这一功能。</p>
            
            <h2 id="5-1">5.1 对话界面使用指南</h2>
            <p>Cursor 的 AI 对话界面设计直观且功能强大，掌握其基本操作是有效利用 AI 能力的第一步。</p>
            
            <div class="tip-card flex items-start">
                <i class="fas fa-lightbulb icon text-xl mt-1"></i>
                <div>
                    <h3 class="text-lg font-semibold mb-2">核心功能提示</h3>
                    <p>使用 <code class="bg-gray-200 px-2 py-1 rounded">@</code> 符号可以快速引用项目中的文件、类或方法，让对话更加精准高效。</p>
                </div>
            </div>
            
            <h3>对话操作基础</h3>
            <ul>
                <li><strong>打开对话面板</strong>：
                    <ul>
                        <li>使用快捷键 <code class="bg-gray-200 px-2 py-1 rounded">Ctrl+/</code>（或 Mac 上的 <code class="bg-gray-200 px-2 py-1 rounded">Cmd+/</code>）</li>
                        <li>点击编辑器右侧的聊天图标</li>
                        <li>使用命令面板（<code class="bg-gray-200 px-2 py-1 rounded">Ctrl+Shift+P</code> 或 <code class="bg-gray-200 px-2 py-1 rounded">Cmd+Shift+P</code>）并搜索"AI 聊天"</li>
                    </ul>
                </li>
                <li><strong>基本交互流程</strong>：
                    <ul>
                        <li>在输入框中输入问题或指令</li>
                        <li>按 Enter 键发送</li>
                        <li>AI 会分析当前上下文（打开的文件、选中的代码等）并提供响应</li>
                        <li>可以继续提问进行多轮对话</li>
                    </ul>
                </li>
                <li><strong>对话控制</strong>：
                    <ul>
                        <li>使用 <code class="bg-gray-200 px-2 py-1 rounded">Esc</code> 键关闭对话面板</li>
                        <li>点击"新建聊天"按钮开始新的对话</li>
                        <li>使用历史记录下拉菜单查看和恢复过去的对话</li>
                        <li>点击"停止生成"按钮中断当前响应</li>
                    </ul>
                </li>
                <li><strong>对话持久化</strong>：
                    <ul>
                        <li>对话历史会自动保存</li>
                        <li>可以为重要对话添加标题（点击对话顶部的编辑图标）</li>
                        <li>对话内容可以导出为 Markdown 文件（通过右上角菜单）</li>
                    </ul>
                </li>
            </ul>
            
            <h3>代码引用与多轮对话</h3>
            <p>Cursor 支持在对话中引用代码和上下文，这使对话更加精确和有效：</p>
            
            <div class="flex flex-wrap gap-4 mb-6">
                <div class="visual-card flex-1 min-w-[300px]">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                            <i class="fas fa-code text-blue-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">引用当前代码</h3>
                    </div>
                    <ul class="text-sm pl-5 list-disc">
                        <li>在编辑器中选择代码片段</li>
                        <li>打开对话面板，选中的代码会自动作为上下文</li>
                        <li>或使用 <code>@.</code> 符号在对话中显式引用当前选择的代码</li>
                    </ul>
                </div>
                
                <div class="visual-card flex-1 min-w-[300px]">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fas fa-file-code text-purple-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">引用特定文件</h3>
                    </div>
                    <ul class="text-sm pl-5 list-disc">
                        <li>在对话输入框中使用 <code>@</code> 符号</li>
                        <li>键入文件名或路径的一部分</li>
                        <li>从弹出的建议中选择要引用的文件</li>
                    </ul>
                </div>
                
                <div class="visual-card flex-1 min-w-[300px]">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <i class="fas fa-project-diagram text-green-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">构建多轮上下文</h3>
                    </div>
                    <ul class="text-sm pl-5 list-disc">
                        <li>对话是连续的，每个问题和回答都会成为后续交互的上下文</li>
                        <li>可以通过追问深入探讨特定问题</li>
                        <li>使用"新建聊天"按钮重置上下文</li>
                    </ul>
                </div>
            </div>
            
            <p>示例多轮对话：</p>
            <div class="code-block">
                <pre><code>用户: @utils/DateFormatter.java 这个文件中的 formatDate 方法有什么问题？

AI: 检查了 formatDate 方法，发现几个潜在问题:

1. 没有处理无效日期输入，如果传入 null 或格式不正确的字符串，将抛出 NullPointerException 或 ParseException
2. 硬编码的日期格式不支持国际化
3. 没有考虑时区问题，可能导致在不同区域显示不同的结果

建议修改如下:
[代码建议...]

用户: 你能修改这个方法，增加对不同地区日期格式的支持吗？

AI: 当然，这里是增加了地区支持的修改版本:
[更新后的代码...]

用户: 能否增加一个新的方法，用于格式化时间段（如 "2小时前"）？

AI: 这里是一个新的 formatTimeAgo 方法实现:
[新方法代码...]</code></pre>
            </div>
            
            <!-- Data Visualization -->
            <div class="diagram-container">
                <h3 class="text-xl font-semibold mb-4 text-center">Cursor AI 对话功能流程</h3>
                <div class="mermaid">
                    graph TD
                        A[开发者提出问题] --> B{包含代码引用?}
                        B -->|是| C[分析代码上下文]
                        B -->|否| D[直接回答问题]
                        C --> E[结合代码分析问题]
                        E --> F[提供针对性解决方案]
                        F --> G[开发者继续追问]
                        G --> C
                        D --> H[开发者评价回答质量]
                        H --> I{满意?}
                        I -->|是| J[对话结束]
                        I -->|否| K[指出具体问题]
                        K --> L[AI修正回答]
                </div>
            </div>
            
            <h2 id="5-2">5.2 提高交互质量的技巧</h2>
            <p>高质量的对话交互能够极大提升 AI 助手的帮助效果，以下技巧可以帮助您获得更精准的响应。</p>
            
            <h3>有效提问结构</h3>
            <p>构建清晰、具体的问题是获得高质量回答的关键：</p>
            <ul>
                <li><strong>提供足够上下文</strong>：
                    <ul>
                        <li>说明项目背景和技术栈</li>
                        <li>引用相关代码或文件</li>
                        <li>描述您尝试实现的目标</li>
                    </ul>
                </li>
                <li><strong>明确问题范围</strong>：
                    <ul>
                        <li>具体指出您需要帮助的方面</li>
                        <li>避免过于宽泛的问题</li>
                        <li>将复杂问题分解为较小的部分</li>
                    </ul>
                </li>
                <li><strong>指定输出格式</strong>：
                    <ul>
                        <li>明确说明您期望的回答形式（代码、解释、步骤等）</li>
                        <li>指定偏好的编码风格或约定</li>
                        <li>提及是否需要详细注释或简化版本</li>
                    </ul>
                </li>
            </ul>
            
            <div class="code-block">
                <pre><code>我正在开发一个使用 React 和 TypeScript 的电子商务网站。
我需要实现一个购物车功能，可以添加、删除商品和计算总价。

以下是我当前的 CartContext 代码:
@src/contexts/CartContext.tsx

请帮我完善这个上下文，特别是添加以下功能:
1. 添加商品数量增减功能
2. 将购物车数据保存到 localStorage
3. 计算商品总价时考虑折扣

请提供 TypeScript 代码，使用函数组件和 hooks，遵循项目中的命名约定。</code></pre>
            </div>
            
            <h3>提示词工程基础</h3>
            <p>提示词工程（Prompt Engineering）是与 AI 有效交互的关键技能：</p>
            
            <div class="flex flex-col md:flex-row gap-6 mb-8">
                <div class="flex-1 bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-times-circle text-red-500 mr-2"></i>
                        <h4 class="font-semibold">不太有效的提问</h4>
                    </div>
                    <div class="code-block bg-white">
                        <pre><code>帮我写代码处理文件上传</code></pre>
                    </div>
                </div>
                
                <div class="flex-1 bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                        <h4 class="font-semibold">更有效的提问</h4>
                    </div>
                    <div class="code-block bg-white">
                        <pre><code>作为一名Java后端专家，请为我编写一个Spring Boot控制器，处理图片文件上传到本地存储。
控制器应包含:
1. 文件上传端点
2. 上传进度日志
3. 文件类型验证（仅允许 jpg, png, webp）
4. 错误处理和用户反馈

使用最新的Spring Boot 3.0和Java 17特性，并考虑文件大小限制和安全性问题。</code></pre>
                    </div>
                </div>
            </div>
            
            <h3>错误回答修正策略</h3>
            <p>即使是先进的 AI 也会生成不完美或不正确的回答，以下是处理这种情况的策略：</p>
            <ul>
                <li><strong>具体指出问题</strong>：
                    <ul>
                        <li>明确指出回答中的错误或不足</li>
                        <li>提供特定的例子说明问题所在</li>
                        <li>避免模糊的反馈（如"这不对"或"重试"）</li>
                    </ul>
                </li>
                <li><strong>引导式修正</strong>：
                    <ul>
                        <li>提供修正方向（"考虑 X 因素"、"这里需要处理 Y 情况"）</li>
                        <li>询问特定部分的替代方案</li>
                        <li>建议不同的思路或方法</li>
                    </ul>
                </li>
            </ul>
            
            <div class="code-block">
                <pre><code>用户: 请检查我最近的更改，主要关注用户认证部分的安全性

AI: 我已审查您的更改，发现了几个安全相关问题:

1. AuthService.java:42 - 密码验证没有使用恒定时间比较，可能容易受到计时攻击
2. LoginController.java:78 - 登录失败消息过于具体，可能泄露用户存在信息
3. SessionManager.java:134 - 会话令牌生成使用了不安全的随机数生成方法

建议修改:
[详细修改建议]</code></pre>
            </div>
            
            <h2 id="5-3">5.3 实用对话场景</h2>
            <p>Cursor 的 AI 对话功能可以应用于各种编程场景，以下是一些最常见和最有价值的使用案例。</p>
            
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="visual-card">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                            <i class="fas fa-bug text-red-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">代码调试与问题排查</h3>
                    </div>
                    <p>AI 对话在调试复杂问题时特别有用：</p>
                    <ul class="text-sm pl-5 list-disc">
                        <li><strong>错误分析</strong>：粘贴错误消息和相关代码</li>
                        <li><strong>性能问题</strong>：分享性能瓶颈的代码</li>
                        <li><strong>逻辑错误</strong>：描述预期行为和实际行为</li>
                    </ul>
                </div>
                
                <div class="visual-card">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                            <i class="fas fa-graduation-cap text-blue-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">技术学习与概念解释</h3>
                    </div>
                    <p>Cursor 可以作为一个个性化的编程导师：</p>
                    <ul class="text-sm pl-5 list-disc">
                        <li><strong>概念解释</strong>：询问特定编程概念或技术</li>
                        <li><strong>框架学习</strong>：询问框架特性或最佳实践</li>
                        <li><strong>代码解读</strong>：分享不熟悉的代码片段</li>
                    </ul>
                </div>
                
                <div class="visual-card">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fas fa-sitemap text-purple-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">设计模式咨询</h3>
                    </div>
                    <p>AI 对话可以帮助解决代码架构和设计问题：</p>
                    <ul class="text-sm pl-5 list-disc">
                        <li><strong>设计模式应用</strong>：询问特定问题适用的设计模式</li>
                        <li><strong>架构决策</strong>：描述项目需求和约束</li>
                        <li><strong>代码重构</strong>：分享需要改进的代码</li>
                    </ul>
                </div>
                
                <div class="visual-card">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <i class="fas fa-cogs text-green-500"></i>
                        </div>
                        <h3 class="text-lg font-semibold m-0">系统设计对话</h3>
                    </div>
                    <p>处理更大规模的系统架构问题：</p>
                    <ul class="text-sm pl-5 list-disc">
                        <li><strong>架构设计</strong>：描述系统需求和规模</li>
                        <li><strong>技术选型</strong>：描述项目需求和团队背景</li>
                        <li><strong>扩展性规划</strong>：分享当前架构</li>
                    </ul>
                </div>
            </div>
            
            <h2 id="5-4">5.4 专业领域知识获取</h2>
            <p>Cursor 的 AI 助手拥有广泛的专业知识，可以帮助开发者解决特定领域的问题。</p>
            
            <div class="diagram-container">
                <h3 class="text-xl font-semibold mb-4 text-center">AI 对话知识领域</h3>
                <div class="mermaid">
                    mindmap
                        root((Cursor AI))
                            编程语言
                                JavaScript/TypeScript
                                Python
                                Java
                                Go
                                Rust
                            前端框架
                                React
                                Vue
                                Angular
                                Svelte
                            后端框架
                                Spring
                                Django
                                Express
                                Laravel
                            数据库
                                SQL
                                MongoDB
                                Redis
                                PostgreSQL
                            云服务
                                AWS
                                Azure
                                GCP
                                Kubernetes
                            算法与数据结构
                                排序算法
                                图算法
                                动态规划
                                复杂度分析
                            系统设计
                                架构模式
                                分布式系统
                                微服务
                                消息队列
                </div>
            </div>
            
            <div class="bg-blue-50 p-6 rounded-xl border border-blue-200 mb-8">
                <div class="flex items-start">
                    <div class="flex-shrink-0 mr-4">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-star text-blue-500 text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-blue-800 mb-2">专业提示</h3>
                        <p class="text-blue-700">当需要解决特定领域问题时，明确指定领域和期望的详细程度可以显著提高回答质量。例如："作为数据库专家，请详细解释PostgreSQL中的索引策略，包括B-tree、Hash和GIN索引的适用场景和性能特点。"</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto px-4 max-w-5xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                    <p class="text-sm opacity-75">探索技术前沿，分享知识价值</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="inline-flex items-center px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-md transition duration-200">
                        <i class="fas fa-external-link-alt mr-2"></i> 访问语雀主页
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-sm text-center opacity-75">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeCSS: `
                .node rect {
                    fill: #f8fafc;
                    stroke: #cbd5e1;
                    stroke-width: 1.5px;
                }
                .node .label {
                    color: #334155;
                }
                .edgeLabel {
                    color: #64748b;
                }
                .cluster rect {
                    fill: #f1f5f9;
                    stroke: #e2e8f0;
                    rx: 8;
                    ry: 8;
                }
            `,
            mindmap: {
                spacingFactor: 0.8
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 卡片悬停效果
        document.querySelectorAll('.visual-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = '';
            });
        });
    </script>
</body>
</html>
```